<template>
  <div class="operation-logs">
    <div class="section-header">
      <h3>操作日志记录</h3>
      <div class="header-actions">
        <a-button type="text" size="small" class="action-btn">
          <template #icon>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
              <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z" fill="#4FC3F7"/>
            </svg>
          </template>
          导出
        </a-button>
      </div>
    </div>
    
    <!-- 表格结构 -->
    <div class="logs-table">
      <!-- 表头 -->
      <div class="table-header">
        <div class="header-cell log-name">日志名称</div>
        <div class="header-cell operator">操作人</div>
        <div class="header-cell module">模块</div>
        <div class="header-cell save-time">保存时间</div>
      </div>
      
    <!-- 表格内容：从后端分页接口渲染 -->
      <div class="table-body">
        <template v-if="displayLogs.length">
          <div class="table-row" v-for="(row, idx) in displayLogs" :key="idx">
            <div class="table-cell log-name">
              <div class="log-title">{{ row.title }}</div>
            </div>
            <div class="table-cell operator">{{ row.user || '-' }}</div>
            <div class="table-cell module">{{ row.target || '-' }}</div>
            <div class="table-cell save-time">{{ row.time || '-' }}</div>
          </div>
        </template>
        <div v-else class="empty-holder">暂无日志数据</div>
      </div>
    </div>
    
    <div class="logs-footer">
      <div class="pagination-info">
        <span class="page-text">第 {{ current }} / {{ totalPages }} 页</span>
      </div>
      <a-pagination
        :current="current"
        :pageSize="pageSize"
        :total="total"
        :showSizeChanger="false"
        :hideOnSinglePage="true"
        :showLessItems="true"
        @change="onPageChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { operationLogApi } from '@/api'

const logs = ref([])
const loading = ref(false)
const current = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 将后端返回的records映射为前端展示所需字段，容错多字段命名
const displayLogs = computed(() => {
  return (logs.value || []).map(r => ({
    title: r.logName || r.title || r.operation || r.operationTypeName || '操作',
    user: r.operator || r.createBy || r.userName || '系统',
    target: r.module || r.target || r.resource || '',
    time: r.createTime || r.operationTime || r.operateTime || r.gmtCreate || '',
  }))
})

async function fetchLogs(page = current.value, size = pageSize.value) {
  loading.value = true
  try {
    const resp = await operationLogApi.getPage({ current: page, size })
    logs.value = Array.isArray(resp?.records) ? resp.records : []
    total.value = Number(resp?.total || 0)
    current.value = Number(resp?.current || page)
    pageSize.value = Number(resp?.size || size)
  } catch (err) {
    console.error('获取操作日志失败:', err)
    message.error('获取操作日志失败，请稍后重试')
  } finally {
    loading.value = false
  }
}

function onPageChange(page, size) {
  fetchLogs(page, size)
}

const totalPages = computed(() => {
  const t = Number(total.value || 0)
  const s = Number(pageSize.value || 10)
  return Math.max(1, Math.ceil(t / s))
})

onMounted(() => {
  fetchLogs(1, pageSize.value)
})
</script>

<style scoped>
.operation-logs {
  background: #FFFFFF0C;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  font-family: 'Source Han Sans', sans-serif;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* 空数据占位 */
.empty-holder {
  color: rgba(255, 255, 255, 0.65);
  text-align: center;
  padding: 24px 0;
}

/* 分页暗色样式优化 */
.logs-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.logs-footer .pagination-info .page-text {
  color: rgba(255, 255, 255, 0.8);
}
.logs-footer :deep(.ant-pagination) {
  color: rgba(255, 255, 255, 0.85);
}
.logs-footer :deep(.ant-pagination-item) {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}
.logs-footer :deep(.ant-pagination-item a) {
  color: rgba(255, 255, 255, 0.9);
}
.logs-footer :deep(.ant-pagination-item-active) {
  background: rgba(79, 195, 247, 0.22);
  border-color: rgba(79, 195, 247, 0.7);
}
.logs-footer :deep(.ant-pagination-item-active a) {
  color: #fff;
}
.logs-footer :deep(.ant-pagination-prev .anticon),
.logs-footer :deep(.ant-pagination-next .anticon) {
  color: rgba(255, 255, 255, 0.9);
}
.logs-footer :deep(.ant-pagination-disabled .anticon) {
  color: rgba(255, 255, 255, 0.35);
}

.section-header h3 {
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  font-family: 'Source Han Sans', sans-serif;
}

.header-actions {
  display: flex;
  gap: 8px;
}

.action-btn {
  color: #00CFFD !important;
  padding: 4px 8px !important;
  height: auto !important;
  font-size: 12px !important;
  display: flex;
  align-items: center;
  gap: 4px;
}

.action-btn:hover {
  background: rgba(0, 207, 253, 0.1) !important;
}

/* 表格样式 */
.logs-table {
  background: transparent;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.table-header {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 2fr;
  gap: 16px;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.header-cell {
  color: #A0AEC0;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
}


.table-body {
  flex: 1;
  overflow-y: auto;
}

.table-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 2fr;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background-color 0.2s ease;
}

.table-row:hover {
  background: rgba(255, 255, 255, 0.05);
}

.table-row:last-child {
  border-bottom: none;
}

.table-cell {
  display: flex;
  align-items: center;
  min-height: 40px;
  /* 统一为“保存时间”列的字体样式 */
  color: #A0AEC0;
  font-size: 13px;
}

.table-cell.log-name {
  align-items: center;
  padding-top: 0;
}

.table-cell.save-time {
  /* 保持与统一样式一致，便于以后单独覆盖 */
}

.log-info {
  width: 100%;
}

.log-title {
  color: #A0AEC0;
  font-size: 13px;
  font-weight: 400;
  margin: 0;
  line-height: 1.2;
}


.logs-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  background: transparent;
}

.pagination-info {
  flex: 1;
}

.page-text {
  color: #A0AEC0;
  font-size: 12px;
}

.view-all-btn {
  color: #00CFFD !important;
  font-size: 12px !important;
  padding: 0 !important;
  height: auto !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.view-all-btn:hover {
  color: #29B6F6 !important;
}

/* 自定义滚动条 */
.table-body::-webkit-scrollbar {
  width: 4px;
}

.table-body::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}

.table-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

.table-body::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .table-header,
  .table-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  .header-cell,
  .table-cell {
    text-align: left !important;
    justify-content: flex-start !important;
  }
}
</style>